<template>
  <div class="common-layout">
    <el-container>
      <el-aside style="width: auto;height: 100%;border: none; outline: none;">
        <el-menu
            ref="AsideMenuRef"
            active-text-color="#59a5f5"
            background-color="#2c2c2c"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            text-color="#fff"
            router
            style="height:100vh;"
        >

          <el-menu-item @click="switchMenuCollapse">
            <el-icon v-if="isCollapse">
              <Expand/>
            </el-icon>
            <el-icon v-else>
              <Fold/>
            </el-icon>
            <span>点 击 收 起</span>
          </el-menu-item>
          <el-divider style="margin: 15px 0"/>
          <el-menu-item index="/userCenter">
            <el-icon>
              <Avatar/>
            </el-icon>
            <span>个 人 中 心</span>
          </el-menu-item>
          <el-menu-item index="/square">
            <el-icon>
              <Guide/>
            </el-icon>
            <span>聊 天 广 场</span>
          </el-menu-item>
          <el-menu-item index="/friend" disabled>
            <el-icon>
              <Memo/>
            </el-icon>
            <span>好 友 列 表</span>
          </el-menu-item>

          <el-menu-item index="/message">
            <el-icon>
              <Message/>
            </el-icon>
            <span>通 知 信 息</span>
          </el-menu-item>


        </el-menu>
      </el-aside>

      <el-container>
        <el-header
            style="width: 100%;padding: 0; height: 50px;background-color: #00BFFF;color: #fff;position: relative;outline: none !important;border: none">
          <p style="text-align: center;line-height: 50px">掠空之翼聊天室欢迎:{{ userData.username }}</p>
          <el-dropdown style="width: 40px;height: 40px;position: absolute;right: 5px;top: 5px;">
            <el-avatar :src="userData.avatar"></el-avatar>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <router-link to="/resetPassword">修改密码</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-popconfirm
                      width="220"
                      confirm-button-text="确定"
                      cancel-button-text="取消"
                      icon-color="#626AEF"
                      title="确定退出吗？"
                      @confirm="logout"
                  >
                    <template #reference>
                      退出登录
                    </template>
                  </el-popconfirm>
                </el-dropdown-item>

              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main style="padding: 0;width: 100%;height: 100%;overflow: hidden;">
          <router-view></router-view>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>

import {Avatar, Expand, Fold, Guide, Location, Memo, Message, School} from "@element-plus/icons-vue";
import request from "@/utils/request";

export default {
  name: "Home",
  components: {Fold, Expand, Message, Memo, Guide, School, Location, Avatar},
  data() {
    return {
      userData: {
        username: '',
        avatar: ''
      },
      isCollapse: false
    }
  },
  methods: {
    switchMenuCollapse() {
      this.isCollapse = !this.isCollapse
    },
    getUsernameAvatar() {
      request.get("/getUsernameAvatar").then(
          res => {
            this.userData = res.data
            localStorage.setItem("curUserId", res.data.id)
          },
          err => {
            console.log(err)
          }
      )
    },
    logout(){
    //   退出登录
      localStorage.removeItem("jwt")
      this.$router.push("/login")
    }
  },
  mounted() {
    //   获取当前用户信息
    this.getUsernameAvatar()

  }
}

</script>
<style>

</style>